<template>
    <input
        v-model="inputVal"
        :style="{ width: width + 'px' }"
        class="kl-input"
        @input="inputEvent"
        @blur="blurEvent"
    />
</template>

<script>
import { isToNumber } from '@/mixins/tool/tool'
export default {
    name: 'kl-input',
    props: {
        min: {
            type: String,
            default: '0',
            validator: value => {
                return  !isToNumber(+value)
            },
        },
        max: {
            type: String,
            default: '',
            validator: value => value === '' || isToNumber(value),
        },
        type: {
            type: String,
            default: 'number',
            validator: value => ['number'].includes(value),
        },
        width: {
            type: Number,
            default: 300,
        },
        value: {
            type: [Number, String],
            default: '',
        },
        interval: {
            type: Boolean,
            default: false,
        },
        integer: {
            type: Boolean,
            default: false,
        },
        decimal: {
            type: Number,
            default: 2,
        }
    },
    data() {
        return {
            inputVal: '',
        }
    },
    created() {
        this.inputVal = this.value;
    },
    methods: {
        inputEvent(e) {
            let { integer, interval, min, max, decimal } = this;
            let value = e.target.value;

            // 去除连续输入的0
            value = value.replace(/^0+/, '');

            // 整数或小数处理
            if (integer) {
                value = value.replace(/[^\d]/g, '');
            } else {
                value = value.replace(/[^.\d]|(?<=\.)\./g, '');
                if (value.startsWith('0') && value[1] !== '.') {
                    value = value.replace(/^0/, '');
                }

                // 控制小数位数
                const parts = value.split('.');
                if (parts[1] && parts[1].length > decimal) {
                    value = parts[0] + '.' + parts[1].slice(0, decimal);
                }
            }

            // 添加千位分隔符
            if (interval) {
                // 移除现有的千位分隔符以便重新添加
                value = value.replace(/,/g, '');
                value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            }

            // 范围限制
            const numValue = parseFloat(value);
            if (!isNaN(numValue)) {
                if (min !== '' && numValue < parseFloat(min)) {
                    // 防止截断导致无法输入等于min的值
                    if (value.length > min.length) {
                        value = value.slice(0, -1);
                    }
                }
                if (max !== '' && numValue > parseFloat(max)) {
                    value = value.slice(0, -1);
                }
            }

            this.inputVal = value;
            this.$emit('input', value);
        },
        blurEvent(e) {
            let { decimal } = this;
            let value = e.target.value;

            // 如果是整数类型，直接返回
            if (this.integer) {
                return;
            }

            // 确保小数点后有指定的位数
            const numValue = parseFloat(value);
            if (!isNaN(numValue)) {
                value = numValue.toFixed(decimal);
            }

            // 添加千位分隔符
            if (this.interval) {
                value = value.replace(/,/g, '');
                value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            }

            this.inputVal = value;
            this.$emit('input', value);
        },
    },
}
</script>

<style lang="scss" scoped>
.kl-input {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
}
.kl-input:focus {
    border-color: $primary;
}

// 修改placeholder的颜色
.kl-input::-webkit-input-placeholder {
    color: #c0c4cc;
    font-size: 14px;
}
</style>